<template>
  <div>
    <Search
      v-model="queryModel.query"
      @search="
        queryModel.pagenum = 1;
        getList();
      "
      :loading="queryLoading"
      @click="
        model = {};
        $refs.d.show();
      "
      >添加商品</Search
    >
    <MyTable
      rowKey="goods_id"
      v-model="queryModel"
      :loading="queryLoading"
      :cols="cols"
      :data="list"
      :total="total"
      @change="getList"
    >
      <template v-slot:time="{ row: { add_time } }">
        {{ new Date(add_time * 1000).format() }}
      </template>
      <template v-slot:action="{ row }">
        <el-button
          type="primary"
          size="mini"
          @click="
            model = { ...row };
            $refs.d.show();
          "
          >编辑</el-button
        >
        <el-button type="danger" size="mini">删除</el-button>
      </template>
    </MyTable>
    <!-- 添加编辑 -->
    <DF
      lw="80px"
      :title="title + '商品'"
      :opts="opts"
      v-model="model"
      @confirm="confirm"
      ref="d"
    />
  </div>
</template>

<script>
import { pageMixins } from "@/mixins/baseMixins";
import { getGoodsList, addGoods, updateGoods } from "api/goods";
export default {
  mixins: [pageMixins],
  name: "goodsList",
  data() {
    return {
      /**
       * 添加编辑模型
       */
      model: {},
      /**
       * 列
       */
      cols: [
        {
          title: "#",
          type: "index",
        },
        {
          title: "商品名称",
          name: "goods_name",
        },
        {
          title: "商品价格（元）",
          name: "goods_price",
          width: 130,
        },
        {
          title: "商品重量",
          name: "goods_weight",
          width: 100,
        },
        {
          title: "创建时间",
          slot: "time",
          width: 160,
        },
        {
          title: "操作",
          align: "center",
          width: 180,
          slot: "action",
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /**
     * 提交
     */
    async confirm() {
      const d = this.$refs.d;
      try {
        this.model.pics =
          this.model.pics?.map((c) => ({
            pic: c.response.data.tmp_path,
          })) ?? [];
        d.start();
        await (this.model.goods_id ? updateGoods : addGoods)(this.model);
        this.$m.success(this.title + "成功");
        this.getList();
        d.hide();
      } catch (error) {}
      d.stop();
    },
    /**
     * 获取商品列表
     */
    async getList() {
      try {
        this.queryLoading = true;
        const { total, goods } = await getGoodsList(this.queryModel);
        this.list = goods;
        this.total = total;
      } catch (error) {}
      this.queryLoading = false;
    },
  },
  computed: {
    /**
     * 表单配置项
     */
    opts() {
      return {
        goods_name: {
          title: "商品名称",
          max: 20,
          required: true,
        },
        goods_number: {
          title: "商品数量",
          max: 20,
          required: true,
        },
        goods_price: {
          title: "商品价格",
          max: 20,
          required: true,
        },
        goods_weight: {
          title: "商品重量",
          max: 20,
          required: true,
        },
        ...(this.model.goods_id
          ? {}
          : {
              pics: {
                title: "商品图片",
                tag: "upload",
                url: "/shi/upload",
                headers: {
                  Authorization: this.$store.getters.token,
                },
              },
            }),
      };
    },
    /**
     * 标题
     */
    title() {
      return this.model.goods_id ? "修改" : "添加";
    },
  },
};
</script>

<style scoped >
</style>
